<template>
  <view class="my-container">
    <view class="my-head">
      <view class="my-head-top">
        <view class="my-info">
          <image :src="avatar" class="my-avatar"></image>
          <view class="my-name">{{ info.userInfo.name }}</view>
          <view v-if="info.agent" class="my-agent-info">
            <text>{{ info.agent.surname }}</text>
            <text>{{ info.agent.agent }}</text>
            <text>{{ info.agent.levelStr }}</text>
          </view>
          <!-- <view class="my-phone">1837272822</view> -->
        </view>
        <view class="my-set">
          <image src="../../static/assets/tabbar/03.png" class="my-set-icon"></image>
        </view>
      </view>
      <view class="my-money">
        <view class="my-money-main">
          <view class="mm-title">账户余额</view>
          <view class="mm-value">
            {{ showMoney ? info.wallet.amount : '***' }}
            <image v-if="showMoney" src="../../static/assets/catcan.png" class="canis" @click="showMoney = !showMoney"></image>
            <image v-else src="../../static/assets/catnot.png" class="canis" @click="showMoney = !showMoney"></image>
          </view>
          
        </view>
        <view class="my-money-items">
          <view class="my-money-item">
            <view class="mm-title">提现中金额(元)</view>
            <view class="mm-value">{{ info.wallet.withdrawAmount }}</view>
          </view>
          <view class="my-money-item">
            <view class="mm-title">已提现金额(元)</view>
            <view class="mm-value">{{ info.wallet.withdrawPayment }}</view>
          </view>
        </view>
      </view>
    </view>
    <view class="banner">
      <image src="https://junhe.junhejiuye.cn/upload/image/my.png" mode="widthFix" class="banner-img"></image>
    </view>
    <view class="my-tools">
      <view class="my-tool-item" @click="onRoute('wallet')">
        <view class="my-tool-name">
          <image src="../../static/assets/my-tool1.png" class="name-icon"></image>
          <text>我的钱包</text>
        </view>
        <image src="../../static/assets/arrow.png" mode="widthFix" class="my-tool-icon"></image>
      </view>
      <view class="my-tool-item" @click="onRoute('order')">
        <view class="my-tool-name">
          <image src="../../static/assets/my-tool2.png" class="name-icon"></image>
          <text>订单管理</text>
        </view>
        <image src="../../static/assets/arrow.png" mode="widthFix" class="my-tool-icon"></image>
      </view>
      <view class="my-tool-item" @click="onRoute('tk')">
        <view class="my-tool-name">
          <image src="../../static/assets/tabbar/tk.png" class="name-icon"></image>
          <text>我的堂口</text>
        </view>
        <image src="../../static/assets/arrow.png" mode="widthFix" class="my-tool-icon"></image>
      </view>
      <view class="my-tool-item" @click="onRoute('changepassword')">
        <view class="my-tool-name">
          <image src="../../static/assets/my-tool3.png" class="name-icon"></image>
          <text>修改密码</text>
        </view>
        <image src="../../static/assets/arrow.png" mode="widthFix" class="my-tool-icon"></image>
      </view>
      <view class="my-tool-item" @click="onViewArticle(9)">
        <view class="my-tool-name">
          <image src="../../static/assets/t1.png" class="name-icon"></image>
          <text>堂口推广</text>
        </view>
        <image src="../../static/assets/arrow.png" mode="widthFix" class="my-tool-icon"></image>
      </view>
      <view class="my-tool-item" @click="onViewPopularize">
        <view class="my-tool-name">
          <image src="../../static/assets/t2.png" class="name-icon"></image>
          <text>推荐堂主</text>
        </view>
        <image src="../../static/assets/arrow.png" mode="widthFix" class="my-tool-icon"></image>
      </view>
    </view>
    
    <view class="layout">
      <u-button type="error" @click="onLayout">重新登录</u-button>
    </view>
  </view>
</template>

<script>
  import { mapGetters } from 'vuex'
  export default {
    data() {
      return {
        showMoney: false,
        info: {
          userInfo: {},
          wallet: {},
          agent: {},
        }
      }
    },
    computed: {
      ...mapGetters(['avatar'])
    },
    onLoad() {
      this.getInfo()
    },
    methods: {
      getInfo() {
        this.$http({
          url: '/my/getUserInfo'
        }).then(res => {
          this.info = res.data
        })
      },
      onRoute(name) {
        if (name === 'tk') {
          uni.navigateTo({
            url: `/pages/tangkou/mytk?provinceName=${this.info.agent.agent}`
          })
          return
        }
        uni.navigateTo({
          url: `../${name}/index`
        })
      },
      onLayout() {
        uni.removeStorageSync('Token')
        this.$store.commit('setToken', '')
        uni.navigateTo({
          url: '../login/index'
        })
      },
      onViewArticle(id) {
        uni.navigateTo({
          url: '../article/detail?id=' + id
        })
      },
      onViewPopularize() {
        uni.navigateTo({
          url: '../tangkou/popularize'
        })
      }
    }
  }
</script>

<style lang="less">
.my-container{
  min-height: 100vh;
  background: #fafafa;
}
.my-head{
  background: url(../../static/assets/my-bg.png) no-repeat left top;
  background-size: 100% 100%;
  color: #333;
  padding: 10rpx 20rpx;
  font-size: 28rpx;
  .my-head-top{
    display: flex;
    justify-content: space-between;
    align-items: center;
    .my-info{
      display: flex;
    }
    .my-avatar{
      display: block;
      width: 40rpx;
      height: 40rpx;
      margin-right: 10rpx;
      border-radius: 50%;
    }
    .my-agent-info{
      margin-left: 40rpx;
      text {
        margin-left: 14rpx;
      }
    }
    .my-phone{
      margin-left: 40rpx;
    }
    .my-set-icon{
      width: 40rpx;
      height: 40rpx;
    }
  }
  .my-money{
    padding-top: 30rpx;
    .my-money-main{
      text-align: center;
      margin-bottom: 20rpx;
      .mm-value{
        font-size: 40rpx;
        position: relative;
        display: inline-block;
      }
      .canis{
        position: absolute;
        top: 10rpx;
        left: calc(100% + 20rpx);
        width: 34rpx;
        height: 22rpx;
      }
    }
    .my-money-items{
      display: flex;
    }
    .my-money-item{
      flex: 1;
      text-align: center;
    }
    .mm-title{
      margin-bottom: 12rpx;
    }
  }
}
.banner{
  padding: 30rpx 20rpx 0;
  
  .banner-img{
    width: 100%;
  }
}
.my-tools{
  background: #fff;
  margin: 30rpx 0;
  padding-left: 20rpx;
  border-radius: 10rpx;
  .my-tool-item{
    height: 80rpx;
    line-height: 80rpx;
    border-bottom: 1px solid #e8e8e8;
    padding-right: 30rpx;
    color: #666;
    font-size: 28rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .my-tool-name{
    display: flex;
    align-items: center;
    .name-icon{
      width: 40rpx;
      height: 40rpx;
      margin-right: 20rpx;
    }
  }
  .my-tool-icon{
    display: block;
    width: 40rpx;
  }
}

.layout{
  padding: 40rpx 60rpx;
}
</style>
